<template>
  <div class="bg-[#f5f4f2] px-[11%]" id="div-1">
    <el-breadcrumb class="flex justify-end my-2" id="el-breadcrumb-2">
      <el-breadcrumb-item :to="{ path: '/' }" id="el-breadcrumb-item-3">首页</el-breadcrumb-item>
      <el-breadcrumb-item id="el-breadcrumb-item-4">公开</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="16" id="el-row-5">
      <el-col :span="18" id="el-col-6">
        <el-card class="!shadow-none border-0 rounded-none px-4" id="el-card-7">
          <el-link
            v-for="(item, index) in tabs1"
            :key="index"
            :class="[index === 0 ? 'border-t-4' : 'ml-12', 'text-[#94080b] font-bold text-xl border-0 border-solid border-[#94080b] py-3']"
            :id="`el-link-8-${index}`"
            >{{ item }}</el-link
          >
          <el-form id="el-form-9">
            <el-row :gutter="16" id="el-row-10">
              <el-col :span="11" id="el-col-11">
                <el-form-item id="el-form-item-12">
                  <template #label>
                    <el-text class="text-[#94080b] font-bold" id="el-text-13">标ㅤㅤ题</el-text>
                  </template>
                  <el-input placeholder="标题" clearable id="el-inout-14" />
                </el-form-item>
              </el-col>
              <el-col :span="10" id="el-col-15">
                <el-form-item id="el-form-item-16">
                  <template #label>
                    <el-text class="text-[#94080b] font-bold" id="el-text-17">发文字号</el-text>
                  </template>
                  <el-space :size="4" id="el-space-18">
                    <el-input placeholder="如:市政府" clearable id="el-inout-19" />
                    <el-input placeholder="2020" clearable id="el-inout-20" />
                    <el-input placeholder="22" clearable id="el-inout-21" />
                    <el-text id="el-text-22">号</el-text>
                  </el-space>
                </el-form-item>
              </el-col>
              <el-col :span="5" id="el-col-23">
                <el-form-item id="el-form-item-24">
                  <template #label>
                    <el-text class="text-[#94080b] font-bold" id="el-text-25">发布时间</el-text>
                  </template>
                  <el-date-picker id="el-date-picker-26" />
                </el-form-item>
              </el-col>
              <el-col :span="6" id="el-col-27">
                <el-form-item id="el-form-item-28">
                  <template #label>
                    <el-text class="text-[#94080b] font-bold" id="el-text-29">结束时间</el-text>
                  </template>
                  <el-date-picker id="el-date-picker-30" />
                </el-form-item>
              </el-col>
              <el-col :span="10" id="el-col-31">
                <el-form-item class="mr-6" id="el-form-item-32">
                  <template #label>
                    <el-text class="text-[#94080b] font-bold" id="el-text-33">有 效 性</el-text>
                  </template>
                  <el-space :size="4" class="w-full grid grid-cols-3" id="el-space-34">
                    <el-select placeholder="有效" id="el-select-35">
                      <el-option label="有效" value="有效" id="el-option-36">有效</el-option>
                      <el-option label="无效" value="无效" id="el-option-37">无效</el-option>
                    </el-select>
                    <el-button class="bg-[#94080b] text-sm text-white" id="el-button-38">检索</el-button>
                    <el-button class="bg-[#94080b] text-sm text-white" id="el-button-39">重置</el-button>
                  </el-space>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card class="!shadow-none border-0 rounded-none px-4 my-6 pb-4" id="el-card-40">
          <el-link
            v-for="(item, index) in tabs2"
            :key="index"
            :class="[
              index === 0 ? 'border-t-4 text-[#94080b]' : 'ml-6 text-[#333]',
              'font-bold text-xl border-0 border-solid border-[#94080b] pt-3',
            ]"
            :id="`el-link-41-${index}`"
            >{{ item }}</el-link
          >
          <div v-for="(item, index) in lists1" :key="index" :id="`bc-div-1-${index}`">
            <el-link class="text-lg my-2" :id="`el-link-42-${index}`">
              <el-text class="w-1 h-1 bg-black rounded-full mx-2" :id="`el-text-43-${index}`" /> {{ item }}
            </el-link>
          </div>
        </el-card>
        <el-card class="!shadow-none border-0 rounded-none px-4 my-6 pb-4" id="el-card-44">
          <el-link
            v-for="(item, index) in tabs3"
            :key="index"
            :class="[
              index === 0 ? 'border-t-4 text-[#94080b]' : 'ml-6 text-[#333]',
              'font-bold text-xl border-0 border-solid border-[#94080b] pt-3',
            ]"
            :id="`el-link-45-${index}`"
            >{{ item }}</el-link
          >
          <div v-for="(item, index) in lists2" :key="index" :id="`bc-div-2-${index}`">
            <el-link class="text-lg my-2" :id="`el-link-46-${index}`">
              <el-text class="w-1 h-1 bg-black rounded-full mx-2" :id="`el-text-47-${index}`" /> {{ item }}
            </el-link>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" id="el-col-48">
        <el-card class="!shadow-none border-0 rounded-none pb-3" id="el-card-49">
          <el-text class="bg-[#94080b] block py-5 text-3xl text-white font-bold text-center" id="el-text-50">政府信息公开</el-text>
          <el-row :gutter="16" class="my-2.5" id="el-row-51">
            <el-col :span="12" v-for="(item, index) in lists3" :key="index" class="text-center" :id="`el-col-52-${index}`">
              <el-link class="text-xl my-1" :id="`el-link-53-${index}`">{{ item }}</el-link>
            </el-col>
          </el-row>
          <el-link
            v-for="(item, index) in lists4"
            :key="index"
            class="block text-xl mx-3 mb-[1px] py-2 bg-[#f5e5e5] text-[#900309]"
            :id="`el-link-54-${index}`"
          >
            <el-icon class="mx-6" :id="`el-icon-55-${index}`"><CaretRight class="text-[#900309]" :id="`CaretRight-56-${index}`" /></el-icon>
            {{ item }}
          </el-link>
        </el-card>
      </el-col>
    </el-row>
    <el-card class="!shadow-none border-0 rounded-none px-4" id="el-card-57">
      <el-link
        v-for="(item, index) in tabs4"
        :key="index"
        :class="[
          index === 0 ? 'border-t-4 text-[#94080b]' : 'ml-6 text-[#333]',
          'font-bold text-xl border-0 border-solid border-[#94080b] pt-3',
        ]"
        :id="`el-link-58-${index}`"
        >{{ item }}</el-link
      >
      <div class="flex gap-4 my-4" id="div-59">
        <el-card class="w-[18%] p-4 text-center bg-[#fbf1f0] border-2 border-[#d9ccc6]" id="el-card-60">
          <el-text class="bg-[#907773] text-2xl text-white font-bold px-4 py-2" id="el-text-61">决策公开</el-text>
          <div v-for="(item, index) in cardList1" :key="index" class="text-left" :id="`div-62-${index}`">
            <el-text class="block text-xl text-black font-bold mt-4" :id="`el-text-63-${index}`">{{ item.title }}</el-text>
            <el-row :id="`el-row-64-${index}`">
              <el-col :span="12" v-for="(listItem, listIndex) in item.list" :key="listIndex" :id="`el-col-65-${index}`">
                <el-link class="text-lg my-1" :id="`el-link-66-${index}`">{{ listItem }}</el-link>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <el-card class="w-[15%] p-4 text-center bg-[#fdf2ee] border-2 border-[#d9ccc6]" id="el-card-67">
          <el-text class="bg-[#907773] text-2xl text-white font-bold px-4 py-2" id="el-text-68">决策公开</el-text>
          <el-link v-for="(item, index) in cardList2" :key="index" class="text-lg block text-left mt-3" :id="`el-link-69-${index}`">{{
            item
          }}</el-link>
        </el-card>
        <el-card class="w-[30%] p-4 text-center bg-[#f8f7f2] border-2 border-[#d9ccc6]" id="el-card-70">
          <el-text class="bg-[#907773] text-2xl text-white font-bold px-4 py-2" id="el-text-71">决策公开</el-text>
          <el-text class="block text-xl text-black font-bold mt-4 text-left" id="el-text-72">行政执法公示</el-text>
          <div class="text-left" id="div-73">
            <el-link v-for="(item, index) in cardList3" :key="index" class="text-lg mr-6 mt-2" :id="`el-link-74-${index}`">{{
              item
            }}</el-link>
          </div>
          <el-text class="block text-xl text-black font-bold mt-4 text-left" id="el-text-75">监管情况公开</el-text>
          <el-row id="el-row-75">
            <el-col :span="6" v-for="(item, index) in cardList4" class="text-left" :key="index" :id="`el-col-76-${index}`">
              <el-link class="text-lg my-1" :id="`el-link-77-${index}`">{{ item }}</el-link>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="w-[15%] p-4 text-center bg-[#fcf5ef] border-2 border-[#d9ccc6]" id="el-card-78">
          <el-text class="bg-[#907773] text-2xl text-white font-bold px-4 py-2" id="el-text-79">决策公开</el-text>
          <el-text class="block text-xl text-black font-bold mt-4 text-left" id="el-text-80">政务服务</el-text>
          <el-link class="block text-lg mr-6 mt-2 text-left" id="el-link-81">政务服务</el-link>
          <el-text class="block text-xl text-black font-bold mt-4 text-left" id="el-text-82">公共服务</el-text>
          <el-link v-for="(item, index) in cardList5" :key="index" class="text-lg block text-left mt-3" :id="`el-link-83-${index}`">{{
            item
          }}</el-link>
        </el-card>
        <el-card class="w-[18%] p-4 text-center bg-[#fcf7f1] border-2 border-[#d9ccc6]" id="el-card-84">
          <el-text class="bg-[#907773] text-2xl text-white font-bold px-4 py-2" id="el-text-85">决策公开</el-text>
          <div v-for="(item, index) in cardList6" :key="index" class="text-left" :id="`div-86-${index}`">
            <el-text class="block text-xl text-black font-bold mt-4" :id="`el-text-87-${index}`">{{ item.title }}</el-text>
            <el-row :id="`el-row-88-${index}`">
              <el-col :span="12" v-for="(listItem, listIndex) in item.list" :key="listIndex" :id="`el-col-89-${index}`">
                <el-link class="text-lg my-1" :id="`el-link-90-${index}`">{{ listItem }}</el-link>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>
<script setup>
  const tabs1 = ['文件查询', '政策文件库'];
  const tabs2 = ['市政府文件', '市政府办公厅文件', '规范性文件'];
  const lists1 = [
    '西安市人民政府关于聘任第四届西安住房公积金管理委员会委员的通知',
    '西安市人民政府关于公布古树名木致远补充调查结果的通知',
    '西安市人民政府关于聘任施利民为市政府参事的通知',
    '西安市人民政府关于在全市试鸣防空警报的通告',
  ];
  const tabs3 = ['政策图解', '视频解读', '专家解读'];
  const lists2 = [
    '图解 | 《西安市人民政府办公厅关于印发加快推进气象高质量发展五年行动计划(2025——2029年)的通知》',
    '图解 | 《西安市人民政府办公厅关于印发秦岭山区集中安置点规范化建设实施方案的通知》',
    '图解 | 《西安市人民政府办公厅关于印发既有住宅加装电梯工作实施意见的通知》',
    '图解 | 《西安市人民政府办公厅关于印发城市轨道交通保护区管理办法的通知》',
  ];
  const lists3 = [
    '领导之窗',
    '政府机构',
    '政策法规',
    '人事信息',
    '规划计划',
    '应急管理',
    '建议提案',
    '政府会议',
    '新闻发布会',
    '听证会',
    '政府公报',
    '政策问答',
  ];
  const lists4 = [
    '政府信息公开指南',
    '政府信息公开制度',
    '政府信息公开年报',
    '政府信息公开目录',
    '依申请公开',
    '基层政务公开事项标准目录',
    '公共企事业单位',
  ];
  const tabs4 = ['“五公开”专栏', '重点信息公开'];
  const cardList1 = [
    {
      title: '决策预公开',
      list: ['意见征集', '调查问卷', '听证会', '建议提案'],
    },
    {
      title: '决策后公开',
      list: ['政策法规', '政策解读', '规划计划', '政府会议', '政府公报', '新闻发布会'],
    },
  ];
  const cardList2 = ['政府报告', '重点工作', '高质量项目', '在线访谈', '督查审计', '法治政府建设'];
  const cardList3 = ['权责清单', '双随机、一公开 双公示', '反不正当竞争执法'];
  const cardList4 = [
    '财政资金',
    '住房保障',
    '国有土地',
    '政府采购',
    '国有产权',
    '乡村振兴',
    '社会救助',
    '社会福利',
    '教育领域',
    '卫生健康',
    '食药安全',
    '生态环境',
    '应急管理',
    '灾害救援',
    '安全生产',
    '社会保险',
    '就业创业',
    '价格收费',
    '减税降费',
    '不动产登记',
  ];
  const cardList5 = ['政府采购', '中介超市', '公共企事业单位', '公共文化'];
  const cardList6 = [
    {
      title: '落实情况',
      list: ['政府报告', '新闻发布会', '国民经济'],
    },
    {
      title: '跟踪反馈',
      list: ['回应关切', '12345热线', '督查审计', '建议提案'],
    },
  ];
</script>
<style scoped></style>
